<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>程序员的加油站</title>
    <link rel="stylesheet" href="css/bootstrap/bootstrap.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/bootstrap/bootstrap.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
    <!-- 网格系统 : 会把页面平均分成 12列 -->
    <div class="container">
        <!-- row：表示1行 -->
        <div class="row">  
            <!-- col-xl-6:占12列当中的6列，前提是满足xl断点（1200px）,如果小于1200px，那么占100%宽度，都独占一行 -->
            <div class="col-xl-6" style="background-color: aquamarine; text-align: center;">
                <!-- 列 -->1
            </div>
            <div class="col-xl-6" style="background-color: bisque;">2</div>
        </div>

        <!-- 第二行 -->
        <div class="row">
           <div class="col-xl-4" style="background-color: aqua;">3</div>
           <div class="col-xl-4" style="background-color: aquamarine;">4</div>
           <div class="col-xl-4" style="background-color: bisque;">5</div>
        </div>
        <div class="row">
            <!-- col-gl-3:占12列当中的3列，前提是满足gl断点（992px）,如果小于992px，那么占100%宽度,都独占一行-->
            <div class="col-lg-3" style="background-color: aquamarine;">6</div>
            <div class="col-lg-3"style="background-color: bisque;">7</div>
            <div class="col-lg-3"style="background-color: aquamarine;">8</div>
            <div class="col-lg-3"style="background-color: bisque;">9</div>
            
        </div>
        <br>
        <br>
        <div class="row">
            <div class="col-lg-8" style="background-color: aqua;"> 校区新闻  </div>
            <div class="col-lg-4" style="background-color: bisque">通知公告 </div>
        </div>
        <div class="row">
            <div class="col-lg-4"style="background-color: bisque;">院部动态</div>
            <div class="col-lg-4"style="background-color: aquamarine;">媒体关注</div>
            <div class="col-lg-4"style="background-color: bisque;">快速导航</div>
        </div>
       <div class="row">
        <!-- 没有断点，表示，尺寸缩放，没有任何影响 -->
        <div class="col-5" style="background-color: blueviolet;">555</div>
       </div>
       
    </div>
</body>
</html>